<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:400px;height:300px;border: solid 1px black;margin:0 auto;}
        .box ul{margin: 0;padding: 0;list-style: none;display: flex;line-height:30px;background: #efefef;}
        .box ul li{flex:1;border-left:solid 1px #fff;border-right:solid 1px #fff;text-align: center;cursor: pointer;}
        .box ul li.active{background: red;color: #fff;}

        .cont>div{width:400px;height:270px;display:none;}
        .cont .cont1{background: #399;}
        .cont .cont2{background: #393;}
        .cont .cont3{background: #993;}
        .cont .cont4{background: #939;}
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>按钮1</li>
            <li>按钮2</li>
            <li>按钮3</li>
            <li>按钮4</li>
        </ul>
        <div class="cont">
            <div class="cont1">内容1</div>
            <div class="cont2">内容2</div>
            <div class="cont3">内容3</div>
            <div class="cont4">内容4</div>
        </div>
    </div>
</body>
<script>
    // 分析：选项卡（点击按钮，切换指定内容）
    
    // 先获取元素
    // 设置默认索引
    // 根据默认索引设置样式和内容
    // 给每个按钮绑定索引
    // 绑定事件
        // 清除上一个索引的样式和内容
        // 获取当前点击的按钮的索引
        // 根据索引找到指定内容切换
        // 将当前索引设置给“上一个”索引

    // 设计
    // function Tab(){
    //     先获取元素
    //     设置默认索引
    //     this.addIndex();
    //     this.addEvent();
    //     this.init();
    // }
    // Tab.prototype.init = function(){
    //     根据默认索引设置样式和内容
    // }
    // Tab.prototype.addIndex = function(){
    //     给每个按钮绑定索引
    // }
    // Tab.prototype.addEvent = function(){
    //     给每个按钮绑定事件
    //         this.clearStyle();
    //         this.getIndex();
    // }
    // Tab.prototype.clearStyle = function(){
    //     清除上一个索引的样式和内容
    // }
    // Tab.prototype.getIndex = function(){
    //     获取当前点击的按钮的索引
    //     this.changeStyle();
    //     this.setPrev();
    // }
    // Tab.prototype.changeStyle = function(){
    //     根据当前索引找到指定内容切换
    // }
    // Tab.prototype.setPrev = function(){
    //     将当前索引设置给“上一个”索引
    // }
    // new Tab();


    // 编程
    function Tab(){
        // 先获取元素
        this.btns = document.querySelectorAll(".box li")
        this.conts = document.querySelectorAll(".box .cont>div")
        // 设置默认索引
        this.index = 0;

        this.addEvent();
        this.init();
        this.addIndex();
    }
    Tab.prototype.init = function(){
        // 根据默认索引设置样式和内容
        this.btns[this.index].className = "active";
        this.conts[this.index].style.display = "block";
    }
    Tab.prototype.addIndex = function(){
        // 给每个按钮绑定索引
        for(let i=0;i<this.btns.length;i++){
            this.btns[i].index = i;
        }
    }
    Tab.prototype.addEvent = function(){
        const that = this;
        // 给每个按钮绑定事件
        for(let i=0;i<this.btns.length;i++){
            this.btns[i].onclick = function(){
                // 注意事件处理函数内的this指向
                
                // 先清除上一个样式
                that.clearStyle();
                // 获取当前，设置当前样式
                that.getIndex(this);
            }
        }
    }
    Tab.prototype.clearStyle = function(){
        // 清除上一个索引的样式和内容
        this.btns[this.index].className = "";
        this.conts[this.index].style.display = "none";
    }
    Tab.prototype.getIndex = function(now){
        // 获取当前点击的按钮的索引，直接传参给下一个功能
        this.changeStyle(now.index);
        this.setPrev(now.index);
    }
    Tab.prototype.changeStyle = function(i){
        // 根据当前索引找到指定内容切换
        this.btns[i].className = "active";
        this.conts[i].style.display = "block";
    }
    Tab.prototype.setPrev = function(i){
        // 将当前索引设置给“上一个”索引
        this.index = i;
    }

    // 启动选项卡功能
    new Tab();



        



</script>
</html>